Langsung saja berikut cara pembuatannya.
1. Login ke akun blogger anda.
2. Klik
Tata Letak kemudian klik
Edit HTML, download lengkap template anda.
3. Beri tanda centang pada
expand widget template.
4. Cari kode seperti berikut.
]]</b:skin>
copy kode di bawah ini lalu letakkan tepat di atas kode tadi.
.related{ width:534px;background:#eee url(http://i42.tinypic.com/fan675.gif) 43% 0 repeat-y; height:200px; overflow:auto; padding:15px; margin: 0 0 10px; border:1px solid #ccc}
.subscribe{width:250px; float:left}
.subscribe p.img{margin-bottom:10px; font-weight:bold; padding-left:21px; background:url(http://i40.tinypic.com/2mnrz3l.gif) 0px 50% no-repeat}
.subscribe form{margin:0; padding:0}
.related-posts{width:282px; float:right}
.related-posts p{margin:0}
.related-posts h3{margin:0; font-size:12pt; letter-spacing:0}
.related-posts li{background:url('http://i39.tinypic.com/2u5as1d.png') no-repeat center left; list-style-type:none; margin:0 0 5px; padding-left:20px}
Keterangan:
- #eee merupakan warna background dari kolom related post.
- width 534px adalah lebar kolom utama
- 43% adalah letak garis pemisah antara kolom feedburner dengan related post.
- width 250px adalah lebar kolom feed burner
- width 282px adalah lebar kolom related post
* silakan ganti sesuai lebar template anda masing-masing.
5. Kemudian cari lagi kode seperti ini
</head>
Copy kode di bawah ini lalu paste tepat di atas kode tadi.
<script type='text/javascript'>
//<![CDATA[
var relatedTitles = new Array();
var relatedTitlesNum = 0;
var relatedUrls = new Array();
function related_results_labels(json) {
for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
relatedTitles[relatedTitlesNum] = entry.title.$t;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
relatedUrls[relatedTitlesNum] = entry.link[k].href;
relatedTitlesNum++;
break;
}
}
}
}
function removeRelatedDuplicates() {
var tmp = new Array(0);
var tmp2 = new Array(0);
for(var i = 0; i < relatedUrls.length; i++) {
if(!contains(tmp, relatedUrls[i])) {
tmp.length += 1;
tmp[tmp.length - 1] = relatedUrls[i];
tmp2.length += 1;
tmp2[tmp2.length - 1] = relatedTitles[i];
}
}
relatedTitles = tmp2;
relatedUrls = tmp;
}
function contains(a, e) {
for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
return false;
}
function printRelatedLabels() {
var r = Math.floor((relatedTitles.length - 1) * Math.random());
var i = 0;
while (i < relatedTitles.length && i < 20) {
document.write('<li><a href="' + relatedUrls[r] + '">' + relatedTitles[r] + '</a></li>');
if (r < relatedTitles.length - 1) {
r++;
} else {
r = 0;
}
i++;
}
}
//]]>
</script>
6. Terakhir cari kode seperti ini
<data:post.body/>
atau
<p><data:post.body/></p>
Copy kode di bawah ini lalu paste tepat di bawah kode tadi.
<b:if cond='data:blog.pageType == "item"'><br/><br/>
<div class='related'>
<div class='subscribe'>
<p class='img'><a href="http://URL BLOG ANDA/feeds/posts/default">Subscribe via RSS Feed</a></p>
LETAKKAN KODE FORM FEED BURNER ANDA DISINI
</div>
<div class='related-posts'>
<h3>Related posts:</h3>
<li>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=5"' type='text/javascript'/>
</b:if></b:loop>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels(); </script>
</li>
</div>
</div>
</b:if>
Keterangan:
- angka 5 yang berwarna merah menunjukkan jumlah artikel terkait yang ditampilkan.
7. Klik "Simpan".
Sekarang lihat apa yang telah anda lakukan pada template anda.hehe...Semoga bermanfaat...